<template>
  <div>
    <p>您要购买的商品数量:{{ count }}</p>
    <!-- 
      1.给按钮绑定点击事件
      2.在事件处理函数中让count自增
      
      v-on
      语法:v-on:事件名="事件处理函数"
     -->
    <button v-on:click="addCount">点我加一</button>
    <!-- 在v-on:指令绑定时间是,事件处理函数后加括号表示传参,不是调用 -->
    <button v-on:click="adFiveCount(5)">点我加五</button>
    <button @click="sub">点我减一</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    addCount() {
      // 让count自增
      // 在methods中访问data的数据只需要在前面加this即可
      // 重点:记得加this
      this.count++;
    },
    addFiveCount(num) {
      this.count += num;
    },
    sub() {
      this.count--;
    },
  },
};
</script>